<template>
  <div>
    <h2 style="margin-top: 0;">评委推荐</h2>
    <p class="description">按比例随机推荐评委并管理</p>

    <div class="card-container">
      <el-row :gutter="20">
        <el-col :span="12">

          <el-form label-width="120px">
            <el-form-item label="评审活动">
              <el-select v-model="reviewActivity" placeholder="请选择评审活动">
                <el-option label="2024年度油气行业评审活动" value="2024"></el-option>
                <el-option label="2025年度油气行业评审活动" value="2025"></el-option>
                <el-option label="2026年度油气行业评审活动（未开始筹备）" value="2026" disabled></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业组">
              <el-select v-model="selectedSpecialty" placeholder="请选择专业组">
                <el-option label="油气勘探" value="exploration"></el-option>
                <el-option label="油气藏工程" value="reservoir"></el-option>
                <el-option label="钻采与地面工程" value="drilling"></el-option>
                <el-option label="信息工程" value="information"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="推荐评委数量">
              <el-input v-model="judgeCount" type="number" min="1"></el-input>
            </el-form-item>

            <el-form-item label="专家类别比例设置">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div style="margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                      <span>公司领导</span>
                      <span>{{ companyLeaderRatio }}%</span>
                    </div>
                    <el-slider
                        v-model="companyLeaderRatio"
                        :min="0"
                        :max="100"
                        @input="updateTotalRatio">
                    </el-slider>
                  </div>

                  <div style="margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                      <span>公司副总及专家</span>
                      <span>{{ viceLeaderRatio }}%</span>
                    </div>
                    <el-slider
                        v-model="viceLeaderRatio"
                        :min="0"
                        :max="100"
                        @input="updateTotalRatio">
                    </el-slider>
                  </div>
                </el-col>

                <el-col :span="12">
                  <div style="margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                      <span>科研单位</span>
                      <span>{{ researchRatio }}%</span>
                    </div>
                    <el-slider
                        v-model="researchRatio"
                        :min="0"
                        :max="100"
                        @input="updateTotalRatio">
                    </el-slider>
                  </div>

                  <div style="margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                      <span>二级单位</span>
                      <span>{{ secondaryUnitRatio }}%</span>
                    </div>
                    <el-slider
                        v-model="secondaryUnitRatio"
                        :min="0"
                        :max="100"
                        @input="updateTotalRatio">
                    </el-slider>
                  </div>
                </el-col>
              </el-row>

              <div style="text-align: right; margin-top: 10px;">
                <el-tag type="info">总比例: {{ totalRatio }}%</el-tag>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="recommendJudges">
                <i class="fa fa-random"></i> 随机推荐评委
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="12">
          <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
            <h4>推荐评委列表（可手动调整）</h4>
            <el-button type="text" size="small">
              <i class="fa fa-plus"></i> 添加专家
            </el-button>
          </div>

          <el-table
              :data="recommendedJudges"
              border
              style="width: 100%;"
          >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="专家姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="category"
                label="专家类别">
              <template slot-scope="scope">
                <el-tag :type="scope.row.category === '公司领导' ? 'primary' :
                                       scope.row.category === '公司副总及专家' ? 'success' :
                                       scope.row.category === '科研单位' ? 'info' : 'warning'">
                  {{ scope.row.category }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" style="color: #ff4d4f;">移除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="text-align: right; margin-top: 15px;">
            <el-button type="success" @click="confirmJudges">
              <i class="fa fa-check"></i> 确认评委名单并生成密码
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 评委推荐数据
      reviewActivity: '',
      selectedSpecialty: '',
      judgeCount: 10,
      companyLeaderRatio: 20,
      viceLeaderRatio: 30,
      researchRatio: 25,
      secondaryUnitRatio: 25,
      totalRatio: 100,
      recommendedJudges: [
        { name: '张教授', category: '公司领导' },
        { name: '刘总', category: '公司领导' },
        { name: '李工程师', category: '公司副总及专家' },
        { name: '郑专家', category: '公司副总及专家' },
        { name: '吴高工', category: '公司副总及专家' }
      ],
    }
  },
  methods: {
    // 评委推荐相关方法
    updateTotalRatio() {
      this.totalRatio = this.companyLeaderRatio + this.viceLeaderRatio +
          this.researchRatio + this.secondaryUnitRatio;
    },
    resetForm() {
      this.judgeCount = 10;
      this.companyLeaderRatio = 20;
      this.viceLeaderRatio = 30;
      this.researchRatio = 25;
      this.secondaryUnitRatio = 25;
      this.updateTotalRatio();
    },
    recommendJudges() {
      if (!this.selectedSpecialty) {
        this.$message.warning('请选择专业组');
        return;
      }

      if (this.totalRatio !== 100) {
        this.$message.warning('比例总和必须为100%');
        return;
      }

      this.$message.success('已成功推荐评委');
    },
    confirmJudges() {
      if (this.recommendedJudges.length === 0) {
        this.$message.warning('请先推荐评委');
        return;
      }

      this.$confirm('确定要确认该评委名单并生成密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '评委名单已确认，密码已生成'
        });
      }).catch(() => {
        // 取消操作
      });
    },
  }
}
</script>